import Icon from '@/components/Icon';
import styles from './index.module.scss';
import dayjs from 'dayjs';
import { CommentType } from '@/store/redurce/comment';
import { useDispatch } from 'react-redux';
import {
  // getArticleComByIdAction,
  likeCommentAction,
  likeOriginCommentsAction,
  likeReplyCommentsAction,
  saveOriginCommentAction,
} from '@/store/action/comment';
import { useAppSelector } from '@/store';
// import { useAppSelector } from '@/store';

type Props = {
  comment: CommentType;
  type?: 'normal' | 'reply';
};

export default function CommentItem({ comment, type = 'normal' }: Props) {
  const dispatch = useDispatch();
  const { originComment } = useAppSelector((state) => state.comments);
  // const { detail } = useAppSelector((state) => state.article);
  const handleLike = async () => {
    // 4. 点击时触发最顶部的更新action
    if (originComment.com_id === comment.com_id) {
      await dispatch(
        likeOriginCommentsAction(comment.com_id, comment.is_liking)
      );
      return;
    }
    //  5.表示回复里的普通评论
    if (originComment.com_id) {
      await dispatch(
        likeReplyCommentsAction(comment.com_id, comment.is_liking)
      );
      return;
    }
    await dispatch(likeCommentAction(comment.com_id, comment.is_liking));
    // dispatch(getArticleComByIdAction({ type: 'a', source: detail.art_id }));
  };
  return (
    <div className={styles.root}>
      {/* 评论者头像 */}
      <div className="avatar">
        <img src={comment.aut_photo} alt="" />
      </div>

      <div className="comment-info">
        {/* 评论者名字 */}
        <div className="comment-info-header">
          <span className="name">{comment.aut_name}</span>

          {/* 关注或点赞按钮 */}
          <span className="thumbs-up" onClick={handleLike}>
            {comment.like_count}
            <Icon
              type={comment.is_liking ? 'iconbtn_like_sel' : 'iconbtn_like2'}
            />
          </span>
        </div>

        {/* 评论内容 */}
        <div className="comment-content">{comment.content}</div>

        <div className="comment-footer">
          {/* 回复按钮 */}
          {type === 'normal' && (
            <span
              className="replay"
              onClick={() => dispatch(saveOriginCommentAction(comment))}
            >
              {comment.reply_count}回复 <Icon type="iconbtn_right" />
            </span>
          )}

          {/* 评论日期 */}
          <span className="comment-time">
            {dayjs(comment.pubdate).format('YYYY-MM-DD')}
          </span>
        </div>
      </div>
    </div>
  );
}
